var index = 0,
	prev = document.getElementById("prev"),
	next = document.getElementById("next"),
	img = document.getElementById("img"),
	container = document.getElementById("container"),
	dots = document.getElementById("dots").getElementsByTagName('span'),
	time = 0;
function handler(){		//刚打开页面时候要添加事件和定时器
	prev.addEventListener("click",decrease,true)
	next.addEventListener("click",increase,true)
	container.addEventListener("mouseover",pause,true)
	container.addEventListener("mouseout",start,true)
	for(var i = 0; i <= 2;i++){		//给每一个圆圈的span元素添加事件
		dots[i].addEventListener("click",choose,true)
	}
	start();	//开启定时器，开始自动轮播
	// var temp = prev.getAttribute("class");
	// prev.setAttribute("class",temp+" button")
	// prev.classList.add("button")
}

function choose(event){		//点击右下方的圆圈触发此方法
	index=event.target.id;	//获取用户点击圆圈的id，以便知道用户点击的是哪个圆圈
	changeImg();	//更换图片
}	

function pause(){	//暂停setInterval定时器
	clearInterval(time);
}

function start(){	//开启定时器
	time = setInterval(function(){
		index++;
		changeImg();
	},2000);	//每2秒切换一下图片
}

function increase(){	//点击下一张触发的方法
	index++;
	changeImg();
}

function decrease(){	//点击上一张触发的方法
	index--;
	changeImg();
}

function changeImg(){	//这里实现更换图片
	if(index<=0){	//超过下限了
		index=3;
	}else if(index>3){	//超过上限了
		index=1;
	}
	img.setAttribute("src","./img/bg"+index+".jpg");	//更换图片
	for(var i = 1;i <= 3;i++){
		if(i == index){
			dots[index-1].setAttribute("class","active");
		} else {
			dots[i-1].removeAttribute("class")
		}
	}
}

window.onload=function(){	//onload事件在资源被加载完成后会被触发
	handler();
}